<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item><el-input clearable v-model="form.mode" style="width: 300px" placeholder="动员方式"></el-input></el-form-item>
            <el-form-item><el-button type="primary" @click="query">搜索</el-button></el-form-item>
        </el-form>
        <el-table  :data="tableData" border>
            <el-table-column prop="objective" align="center" label="实际目的"></el-table-column>
            <el-table-column prop="mode" align="center" label="动员方式"></el-table-column>
            <!-- <el-table-column  label="状态" align="center">
                <span v-if="this.state === '0'">未回应</span>
                <span v-if="this.state === '1'">已回应</span>
            </el-table-column> -->
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="success"
                            size="mini"
                            @click="details(scope.row)">
                        详情</el-button>
                    <el-button
                            v-show="scope.row.state==='0'"
                            type="danger"
                            size="mini"
                            @click="respond(scope.row)">
                        回应</el-button>
                    <el-button
                            v-show="scope.row.state==='1'"
                            type="info"
                            size="mini"
                            @click="responded(scope.row)">
                        已回应</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!-- 回应弹出框 -->
        <el-dialog title="社区回应" :visible.sync="dialogFormVisible" @close='closeDialog' width="650px">
            <el-form :rules="rules" :model="respondform" ref="respondform" class="ml100">
                <el-form-item label="回应策略" prop="strategy">
                    <el-input v-model="respondform.strategy" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="回应做法" prop="practice">
                    <el-input v-model="respondform.practice" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="对接部门" prop="department">
                    <el-input v-model="respondform.department" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="使用资源" prop="resources">
                    <el-input v-model="respondform.resources" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="投入费用" prop="cost">
                    <el-input v-model="respondform.cost" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="所花时间" prop="time">
                    <el-input v-model="respondform.time" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="具体步骤" prop="step">
                    <el-input v-model="respondform.step" class="w400"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 已回应弹出框 -->
        <el-dialog title="社区回应" :visible.sync="dialogFormVisible1" @close='closeDialog' width="650px">
            <el-form :rules="rules" :model="respondform" ref="respondform" class="ml100">
                <el-form-item label="回应策略" prop="strategy">
                    <el-input v-model="respondform.strategy" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="回应做法" prop="practice">
                    <el-input v-model="respondform.practice" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="对接部门" prop="department">
                    <el-input v-model="respondform.department" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="使用资源" prop="resources">
                    <el-input v-model="respondform.resources" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="投入费用" prop="cost">
                    <el-input v-model="respondform.cost" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="所花时间" prop="time">
                    <el-input v-model="respondform.time" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="具体步骤" prop="step">
                    <el-input v-model="respondform.step" class="w400"></el-input>
                </el-form-item>
            </el-form>

        </el-dialog>


        <el-dialog title="详情" :visible.sync="dialogFormVisibleDetails" width="650px">
            <el-form :rules="rules" :model="detailsform" ref="detailsform" class="ml100">
                <el-form-item label="实际目的" prop="objective">
                    <el-input v-model="detailsform.objective" class="w400" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="动员方式" prop="mode">
                    <el-input v-model="detailsform.mode" class="w400" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="社区需求" prop="demand">
                    <el-input v-model="detailsform.demand" type="textarea" :rows="5" style='width:330px;' readonly="readonly"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button type="primary" @click="ok">关闭</el-button>
            </div>

        </el-dialog>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                //动员搜索
                form: {
                    mode: ''
                },
                cid:'',
                //回应
                respondform: {
                    strategy:'',
                    practice:'',
                    department:'',
                    resources:'',
                    cost:'',
                    time:'',
                    step:'',
                },
                //详情
                detailsform: {
                    objective: '',
                    mode: '',
                    demand: ''
                },
                //回应对话框表单验证
                rules:{
                    strategy:[{ required: true, message: '请输入策略', trigger: 'blur' }],
                    practice: [{ required: true, message: '请输入做法', trigger: 'blur' }],
                    department: [{ required: true, message: '请输入对接部门', trigger: 'blur' }],
                    resources: [{ required: true, message: '请输入资源', trigger: 'blur' }],
                    cost: [{ required: true, message: '请输入投入费用', trigger: 'blur' }],
                    time: [{ required: true, message: '请输入所花时间', trigger: 'blur' }],
                    step: [{ required: true, message: '请输入具体步骤', trigger: 'blur' }],
                },
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisibleDetails: false,
                loading: false,
                typeList:[],

                state:'',
            }
        },



        methods : {
            //初始化
            async init () {
                const res = await this.$http('respondlist',{
                    pageNo: this.pageNo,
                    pageSize: this.pageSize
                });
                console.log('回应列表',res)
                this.state = res.state
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //分页
            async handleSizeChange(val) {
                this.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.pageNo = val;
                this.init();
            },
            //查询搜索
            async query() {
                const res = await this.$http('respondlist', {
                    mode: this.form.mode
                });
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                this.form.mode = ''
            },
            //详情
            details(row){
                this.dialogFormVisibleDetails = true;
                this.detailsform = row;
            },
            //关闭
            async ok(){
                this.dialogFormVisibleDetails = false
            },
            //回应功能
            respond(row){
                this.dialogFormVisible = true
                this.cid= row.id
            },
            //已回应功能
            responded(row){
                console.log('yi回应',row)
                this.dialogFormVisible1 = true
                this.respondform = row
            },
            //点击确定，回应
            async save(){
                const  res = await this.$http('createRespond',{
                    mobilization_id:this.cid,
                    strategy:this.respondform.strategy,
                    practice:this.respondform.practice ,
                    department:this.respondform.department,
                    resources:this.respondform.resources,
                    cost :this.respondform.cost ,
                    time :this.respondform.time ,
                    step :this.respondform.step ,
                    err : res1 => {
                        console.log('2222',res1)
                        if (res1.errcode === 9999) {
                            this.$message({
                                message: '你已经回应过了',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.init()
                        }else {
                            this.$message({
                                message: '回应失败',
                                type: 'error'
                            });
                            this.dialogFormVisible = false
                        }
                    }

                });
                if (res === 'chenggong') {
                    this.$message({
                        message: '回应成功',
                        type: 'success'
                    });
                    this.init()
                    this.dialogFormVisible = false

                }
                console.log('res',res)
            },
            //请空数据
            async closeDialog(){
                this.respondform = {
                    strategy:'',
                    practice:'',
                    department:'',
                    resources:'',
                    cost:'',
                    time:'',
                    step:'',
                };
            },
        },

        watch : {

        },

        mounted () {
            this.init();
        },

    }
</script>


<style scoped>
    .w400{
        width: 330px
    }
</style>
